<template>
  <div>
    <div class="head">
      <el-form inline :model="selectdata"
               label-width="150px"
               size="small"
      >


        <el-form-item>
          <el-input v-model="selectdata.name" @keyup.enter.native="search"
                    placeholder="请输入美食名称">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
          <el-button plain type="primary" @click="search" icon="el-icon-search">搜索</el-button>
        </el-form-item>
      </el-form>

      <div>
        <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="startupchart-btn right"
            plain
            @click="openAddDialog('add')">新增
        </el-button>
      </div>


    </div>


    <div>
      <!-- 表 -->
      <el-table :data="tableData" border v-loading="loading">
        <el-table-column label="ID" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>


        <el-table-column label="美食名称" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>

        <el-table-column label="美食描述" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.description }}</template>
        </el-table-column>

        <el-table-column label="图片地址" align="center" prop="avatar">
          <template slot-scope="scope">
            <el-image :src="scope.row.imgUrl" v-if="scope.row.imgUrl" class="img-wrap"
                      :preview-src-list="scope.row.imgUrl |toArray"></el-image>
          </template>
        </el-table-column>

        <el-table-column label="是否首页推荐" align="center">
          <template slot-scope="scope">
            <!--            <span v-if=" scope.row.isRecommend ===0 ">否</span>-->
            <!--            <span v-else> 是</span>-->


            <!--            <el-switch-->
            <!--                active-color="#13ce66"-->
            <!--                inactive-color="#ff4949">-->
            <!--            </el-switch>-->

            <el-switch v-model="scope.row.isRecommend"
                       :active-value=true
                       :inactive-value=false
                       @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="得分" align="center">
          <template slot-scope="scope">{{ scope.row.score }}</template>
        </el-table-column>

        <!--        <el-table-column label="点赞数" align="center">-->
        <!--          <template slot-scope="scope">{{ scope.row.likeCount }}</template>-->
        <!--        </el-table-column>-->

        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status===0" style="color: red">未审核</span>
            <span v-else style="color: limegreen">已审核</span>
          </template>
        </el-table-column>


        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-button plain size="mini" type="warning"
                       @click="updateStatus(scope.row.id)">审核
            </el-button>
            <el-button plain size="mini" type="success"
                       @click="openAddDialog('edit',scope.row.id)">编辑
            </el-button>
            <el-button plain size="mini" type="danger"
                       @click="deleteData(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>


    <el-dialog :visible.sync="dialogVisible" width="30%" :title="title"
               :before-close="handleClose" center="">

      <el-form :model="form" style="margin-top: 30px" class="add-form-member">
        <el-form-item label="美食名称" label-width="70px">
          <el-input v-model="form.name" placeholder="输入美食名称"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="skipUrl" label-width="70px">
          <el-input type="textarea" v-model="form.description" placeholder="输入美食描述"></el-input>
        </el-form-item>


        <el-form-item label="得分" label-width="70px">
          <el-input v-model="form.score" placeholder="请输入得分"></el-input>
        </el-form-item>

        <el-form-item label="美食类型">
          <el-select v-model="form.foodTypeId" placeholder="请选择类型" style="width: 250px">
            <el-option v-for="(item, index) in foodTypeList"
                       :key="index"
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="图片" style="margin-left: 30px;">
          <el-upload
              :action="action"
              list-type="picture-card"
              :before-upload='beforeAvatarUpload'
              :on-success='handleAvatarSuccess'
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveData">确 定</el-button>
                    </span>
    </el-dialog>

  </div>
</template>

<script>
import moment from 'moment'
import {food_list, add, delete_row, food_detail, food_update_status, food_update_status_down} from "../../api/food";
import {list} from "../../api/food_type";
import switchEnv from '../../utils/global'

export default {
  name: "sys_user",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      dateRange: [],
      foodTypeList: [],
      loading: false,
      dialogVisible: false,
      dialogImageUrl: '',
      dialogVisible1: false,
      title: "",
      formInline: {},
      action: "",
      form: {},
      selectdata: {
        userId: "",
        nickname: "",

      }
    };
  },
  created() {
    this.getData();
    this.getFoodTypeList();
    this.get_img_upload();
  },
  methods: {
    updateStatus(id) {
      this.$confirm('确定审核通过吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        let params = {}
        params.id = id;
        food_update_status_down(params).then(res => {
          console.log(res)
          this.$message.success("审核成功")
          this.getData()
        })
      })

    },
    /**
     * 重置搜索
     */
    clearForm() {
      this.selectdata = {};
      this.getData();
    },
    handleStatusChange(row) {
      let params = {}
      if (row.isRecommend === true) {
        params.isRecommend = 1
      } else {
        params.isRecommend = 0
      }
      params.id = row.id

      food_update_status(params).then(res => {
        this.$message.success("操作成功")
      })

    },

    deleteData(id) {
      this.$confirm("是否删除该数据?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let params = {};
        params.id = id;

        delete_row(params).then(res => {
          if (res.status === 200) {
            this.$message.success("删除成功");
            this.getData()
          }
        })
      })

    },
    handleClose() {
      this.dialogVisible = false
    },


    saveData() {
      let params = {};
      params.name = this.form.name;
      params.imgUrl = this.form.imgUrl;
      params.score = this.form.score;
      params.description = this.form.description;
      params.foodTypeId = this.form.foodTypeId;

      add(params).then(res => {
        if (res.status === 200) {
          this.$message.success("保存成功");
          this.dialogVisible = false;
          this.getData();
        }
      })
    },

    get_img_upload() {
      let urlDomain = 'https://apibyte.wkhelpme.com/mars';
      let uploadUrl = '/upload/v1/img';
      this.action = urlDomain + uploadUrl;
    },

    openAddDialog(type, id) {
      if (type === 'add') {
        this.dialogVisible = true;
        this.form = {};
        this.title = "美食新增";
      } else {
        this.title = "美食编辑";
        //编辑
        this.dialogVisible = true;
        let params = {}
        params.id = id

        food_detail(params).then(res => {
          this.form = res.data
          console.log(res.data.imgUrl)
          this.form.imgUrl = res.data.imgUrl

        })
      }

    },


    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    getFoodTypeList() {
      let params = {};
      list(params).then(res => {
        if (res.status === 200) {
          this.foodTypeList = res.data;
        }
      })
    },

    handleAvatarSuccess(res) {
      console.log(res);
      if (res.status === 200) {
        this.form.imgUrl = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 和 Png 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 3MB!");
        return false;
      }
    },


    /**
     * 搜索
     */
    search() {
      this.currentPage = 1;
      this.getData()
    },


    /**
     * 获取数据
     */
    getData() {
      let params = {};
      this.loading = true;
      params.name = this.selectdata.name;
      params.pageSize = this.pageSize;
      params.pageNumber = this.currentPage;
      params.cookType = 1;
      food_list(params).then(res => {
        if (res.status === 200) {
          this.loading = false;
          this.total = Number.parseInt(res.data.total);
          this.tableData = res.data.list;
        }

      })
    },
    /**
     * 改变每页大小
     */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    /**
     * 改变当前页
     */
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getData();
    },
  },
  filters: {
    filterCtime(ctime) {
      // 过滤时间
      if (ctime) {
        return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return '暂无数据'
      }
    },
    filterShow(show) {
      if (show === 1) {
        return '显示'
      } else {
        return '不显示'
      }
    }
  }
}
</script>

<style scoped>

</style>
